<script setup>

import '@wangeditor/editor/dist/css/style.css';
import {onBeforeUnmount, reactive, ref, shallowRef} from 'vue';
// 导入富文本编辑器的组件
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import router from "@/router";
import {get, post} from "@/net";
import {ElMessage} from "element-plus";
import {useStore} from "@/stores/userStore";

const editorRef = shallowRef();

const toolbarConfig = {};
const editorConfig = ref({ placeholder: '请输入内容...', MENU_CONF: {} });

// 富文本编辑器生成后触发
const handleCreated = editor => {
    editorRef.value = editor; // 记录 editor 实例，重要！
    console.log(editorConfig.value.MENU_CONF, 'editorConfig.value');
};

// 监听富文本编辑器粘贴行为
const customPaste = (editor, event, callback) => {
    // 获取粘贴的纯文本
    const text = event.clipboardData.getData('text/plain');
    if (text) {
        editor.insertText(text);
        event.preventDefault();
        callback(false);
    }
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
});

const form = reactive({
    title: '',
    tid: null,
    content: ''
})

const types = ref([])

const getTypes = () => {
    get('api/type/all', (data) => {
            types.value = data
        })
}

const addArticle = () => {
    post('api/article/add', {
        title: form.title,
        tid: form.tid,
        content: form.content,
        uid: useStore().auth.user.uid
    }, (message) => {
        ElMessage.success(message)
        router.back()
    })
}

getTypes()

</script>

<template>
    <div class="content">
        <div class="title">
            发布文章
        </div>
        <div class="article-form">
            <div class="form-content">
                <el-form :model="form">
                    <el-form-item label="文章标题">
                        <el-input v-model="form.title" placeholder="请输入文章标题" maxlength="30" show-word-limit/>
                    </el-form-item>
                    <el-form-item label="文章分类">
                        <el-select v-model="form.tid" placeholder="请选择文章分类" style="width: 180px;">
                            <el-option v-for="item in types" :key="item.tid" :label="item.type" :value="item.tid" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <Toolbar style="border-bottom: 1px solid #ccc;width: 100%;" :editor="editorRef" :defaultConfig="toolbarConfig"
                                 mode="default" />
                        <Editor style="height: 300px;width: 100%; overflow-y: hidden" v-model="form.content" :defaultConfig="editorConfig" mode="default"
                                @onCreated="handleCreated" @customPaste="customPaste" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addArticle">发布</el-button>
                        <el-button @click="router.back()">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<style scoped>
.content {
    width: 1014px;
    display: flex;
    flex-direction: column;
    margin: 20px auto;
    gap: 14px;
}

.title {
    width: 100%;
    height: 60px;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.7)
}

.article-form {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7)
}

.form-content {
    margin: 20px 40px;
}
</style>